<template>
  <div class="app-container">
    <el-card style="height: 100%;">
      <div class="inforClass">任务信息</div>
      <el-form ref="formQuery" :model="routeQuery" label-width="80px" label-suffix=":" style="padding: 10px 0"
        v-if="routeQuery.participationWay == '指定学生参与'">
        <el-row :gutter="50">
          <el-col :span="8">
            <el-form-item label="任务名称">
              <el-tooltip effect="dark" :content="routeQuery.name" placement="top-start">
                <span>{{ routeQuery.name.length > 15 ? routeQuery.name.slice(0, 15) + '...' : routeQuery.name }}</span>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实践课程">
              <!-- {{ routeQuery.type == 1 ? '劳动教育' : routeQuery.type == 2 ? '职业素养' : routeQuery.type == 3 ? '应急安全' :
                routeQuery.type == 4 ? '思政实践' : '创新创业' }} -->
              {{ (practiceTypeList.find(v => v.id == routeQuery.type) || {}).name }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务时间">
              {{ routeQuery.time }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="8">
            <el-form-item label="所属学期">
              {{ routeQuery.semester }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务次数">
              {{ routeQuery.taskNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="积分上限">
              {{ routeQuery.score }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="formQuery" :model="routeQuery" label-width="80px" label-suffix=":" style="padding: 10px 0" v-else>
        <el-row :gutter="50">
          <el-col :span="8">
            <el-form-item label="任务名称">
              <!-- {{ routeQuery.name }} -->
              <el-tooltip class="item" effect="dark" :content="routeQuery.name" placement="top-start">
                <span>{{ routeQuery.name.length > 15 ? routeQuery.name.slice(0, 15) + '...' : routeQuery.name }}</span>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实践课程">
              <!-- {{ routeQuery.type == 1 ? '劳动教育' : routeQuery.type == 2 ? '职业素养' : routeQuery.type == 3 ? '应急安全' :
                routeQuery.type == 4 ? '思政实践' : '创新创业' }} -->
              {{ (practiceTypeList.find(v => v.id == routeQuery.type) || {}).name }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务时间">
              {{ routeQuery.time }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="8">
            <el-form-item label="所属学期">
              {{ routeQuery.semester }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报名状态">
              {{ routeQuery.statu }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="积分上限">
              {{ routeQuery.score }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="inforClass" style="margin-bottom: 10px;">实践任务完成情况</div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="学院列表" name="first">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="学院">
              <el-select v-model="queryParams.faceXy" @change="handlelistProxy" filterable placeholder="请选择" clearable>
                <el-option v-for="item in proxyList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>

              <el-button type="warning" plain icon="el-icon-download" size="mini" :disabled="tableList.length == 0"
                v-hasPermi="['project:task:export']" style="font-size: 14px; margin-left: 8px;"
                @click="handleExport">导出</el-button>
            </el-form-item>
            <!-- <el-form-item class="total-colleges">
              共{{ tableList.length }}个学院
            </el-form-item> -->
          </el-form>
          <div class="rightNum">
            共{{ tableList.length }}个学院
          </div>
          <el-table v-loading="loading" :data="tableList">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="学院" align="center" prop="xyName" />
            <el-table-column label="学生范围" align="center" prop="allPeople" />
            <el-table-column label="报名人数/报名通过人数" align="center" prop="allPeople1"
              v-if="routeQuery.participationWay != '指定学生参与'">
              <template slot-scope="scope">
                <div>{{ scope.row.applyPassPeoples || 0 }}</div>
              </template>
            </el-table-column>
            <el-table-column label="已提交人数" align="center" prop="submittedPeoples" />
            <el-table-column label="未提交人数" align="center" prop="unSubmittedPeoples" />
            <el-table-column label="已提交人次" align="center" prop="submittedPeoplesNumber"
              v-if="routeQuery.participationWay == '指定学生参与'">
              <template slot-scope="scope">
                <div>{{ scope.row.submittedPeoplesNumber || 0 }}</div>
              </template>
            </el-table-column>
            <el-table-column label="未提交人次" align="center" prop="unSubmittedPeoplesNumber"
              v-if="routeQuery.participationWay == '指定学生参与'">
              <template slot-scope="scope">
                <div>{{ scope.row.unSubmittedPeoplesNumber || 0 }}</div>
              </template>
            </el-table-column>
            <el-table-column :label="routeQuery.participationWay == '指定学生参与' ? '通过人次' : '通过人数'" align="center"
              prop="chickPassPeople" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="专业列表" name="second">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="学院">
              <el-select v-model="queryParams.faceXy" @change="handlelistProzy('学院')" filterable placeholder="请选择"
                clearable>
                <el-option v-for="item in proxyList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业">
              <el-select v-model="queryParams.faceZy" @change="handlelistProzy" filterable placeholder="请选择" clearable>
                <el-option v-for="item in prozyList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>

              <el-button type="warning" plain icon="el-icon-download" size="mini" :disabled="tableList.length == 0"
                v-hasPermi="['project:task:export']" style="font-size: 14px; margin-left: 8px;"
                @click="handleExport">导出</el-button>
            </el-form-item>
          </el-form>
          <div class="rightNum">
            共{{ tableList.length }}个专业
          </div>
          <el-table v-loading="loading" :data="tableList">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="学院" align="center" prop="xyName" />
            <el-table-column label="专业" align="center" prop="zyName" />
            <el-table-column label="学生范围" align="center" prop="allPeople" />
            <el-table-column label="报名人数/报名通过人数" align="center" prop="applyPassPeoples"
              v-if="routeQuery.participationWay != '指定学生参与'">
              <template slot-scope="scope">
                <div>{{ scope.row.applyPassPeoples || 0 }}</div>
              </template>
            </el-table-column>
            <el-table-column label="已提交人数" align="center" prop="submittedPeoples" />
            <el-table-column label="未提交人数" align="center" prop="unSubmittedPeoples" />
            <el-table-column label="已提交人次" align="center" prop="submittedPeoplesNumber"
              v-if="routeQuery.participationWay == '指定学生参与'">
              <template slot-scope="scope">
                <div>{{ scope.row.submittedPeoplesNumber || 0 }}</div>
              </template>
            </el-table-column>
            <el-table-column label="未提交人次" align="center" prop="unSubmittedPeoplesNumber"
              v-if="routeQuery.participationWay == '指定学生参与'">
              <template slot-scope="scope">
                <div>{{ scope.row.unSubmittedPeoplesNumber || 0 }}</div>
              </template>
            </el-table-column>
            <el-table-column :label="routeQuery.participationWay == '指定学生参与' ? '通过人次' : '通过人数'" align="center"
              prop="chickPassPeople" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="学生列表" name="third">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="学院">
              <el-select v-model="queryParams.faceXy" @change="handlelistProbj('学院')" filterable placeholder="请选择"
                clearable>
                <el-option v-for="item in proxyList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业">
              <el-select v-model="queryParams.faceZy" @change="handlelistProbj('专业')" filterable placeholder="请选择"
                clearable>
                <el-option v-for="item in prozyList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="班级">
              <el-select v-model="queryParams.faceBj" @change="handlelistProbj" filterable placeholder="请选择" clearable>
                <el-option v-for="item in probjList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="queryParams.stateStr" placeholder="请选择" clearable
                @change="queryParams.currentPage = 1, handlelistProbj()">
                <el-option v-for="item in stateList" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="queryParams.studentName" @input="queryParams.currentPage = 1, quizNj()" placeholder="请输入"
                clearable />
            </el-form-item>
            <el-form-item label="学号">
              <el-input v-model="queryParams.stNumber" @input="queryParams.currentPage = 1, quizNj()" placeholder="请输入"
                clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="warning" plain icon="el-icon-download" size="mini" :disabled="studentList.length == 0"
                v-hasPermi="['project:task:export']" style="font-size: 14px; margin-left: 8px;"
                @click="handleExport">导出</el-button>
              <el-button type="primary" plain icon="el-icon-refresh" size="mini" style="font-size: 14px;"
                @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="rightNum">
            共{{ studentList.length }}个学生
          </div>
          <el-table :data="studentList">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="学生姓名" align="center" prop="studentName">
              <template slot-scope="scope">
                <div>{{ scope.row.studentName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="学号" align="center" prop="stNumber">
              <template slot-scope="scope">
                <div>{{ scope.row.stNumber }}</div>
              </template>
            </el-table-column>
            <el-table-column label="学院" align="center" prop="xyName">
              <template slot-scope="scope">
                <div>{{ scope.row.xyName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="专业" align="center" prop="zyName">
              <template slot-scope="scope">
                <div>{{ scope.row.zyName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="班级" align="center" prop="bjName" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div>{{ scope.row.bjName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="提交次数" align="center" prop="submitNumber" width="80" v-if="routeQuery.participationWay == '指定学生参与'">
              <template slot-scope="scope">
                <div>{{ scope.row.submitNumber || 0 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="state">
              <template slot-scope="scope">
                <div>{{ scope.row.state || '未提交' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="积分数" align="center" prop="score" />
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.currentPage"
            :limit.sync="queryParams.currentSize" @pagination="quizNj" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script >
import { typeCongfigList } from "@/api/semesManage";
import { listProxyPost, listProzyPost, listProbjPost } from "@/api/project/prold";
import { getPerformanceXy, getPerformanceZy, getPerformanceXs } from "@/api/task/index";
export default {
  name: 'markingView',
  data() {
    return {
      loading: false,
      open: false,
      tableList: [],
      studentList: [],
      total: 0,
      // 查询参数
      queryParams: {
        studentName: '',
        stNumber: '',
        currentPage: 1,
        currentSize: 10,
      },
      xyName: '',
      zyName: '',
      bjName: '',
      practiceTypeList: [], // 实践课程
      form: {},
      routeQuery: {},
      activeName: 'first',
      proxyList: [],
      prozyList: [],
      probjList: [],
      stateList: ['未提交', '未审批', '已通过', '已驳回']
    }
  },
  created() {
    // const permissList = sessionStorage.getItem('practiceTypes').split(',');
    // const typeMap = {
    //   1: { type: '劳动教育', id: 1 },
    //   2: { type: '职业素养', id: 2 },
    //   3: { type: '应急安全', id: 3 },
    //   4: { type: '思政实践', id: 4 },
    //   5: { type: '创新创业', id: 5 }
    // };

    // permissList.forEach(v => {
    //   if (typeMap[v]) {
    //     this.practiceTypeList.push(typeMap[v]);
    //   }
    // });
    this.getTypeCongfigList();
    this.routeQuery = {
      ...this.$route.query
    };
    this.quizXy();
    this.getInit();
  },
  mounted() { },
  methods: {
    getTypeCongfigList() {
      typeCongfigList({
        pageNum: 1,
        pageSize: 50,
      }).then(res => {
        this.practiceTypeList = res.rows;
      });
    },
    getInit() {
      let xyIds = this.$route.query.xyIdList.split(',');
      xyIds.forEach(v => {
        v = String(v);
      });
      let zyIds = this.$route.query.zyIdList.split(',');
      zyIds.forEach(v => {
        v = String(v);
      });
      let bjIds = this.$route.query.bjIdList.split(',');
      bjIds.forEach(v => {
        v = String(v);
      });
      listProxyPost({ xyIds }).then(response => {
        this.proxyList = response.rows;
      });
      if (this.activeName == 'second') {
        const faceXys = !this.queryParams.faceXy ? null : [this.queryParams.faceXy];
        listProzyPost({ xyIds: faceXys, zyIds }).then(response => {
          this.prozyList = response.rows;
        });
      } else if (this.activeName == 'third') {
        const faceXys = !this.queryParams.faceXy ? null : [this.queryParams.faceXy];
        const faceZys = !this.queryParams.faceZy ? null : [this.queryParams.faceZy];
        listProzyPost({ xyIds: faceXys, zyIds }).then(response => {
          this.prozyList = response.rows;
        });
        listProbjPost({ xyIds: faceXys, zyIds: faceZys, bjIds }).then(response => {
          this.probjList = response.rows;
        });
      }
    },
    changeSelet() {
      let zyIds = this.$route.query.zyIdList.split(',');
      zyIds.forEach(v => {
        v = String(v);
      });
      this.prozyList = [];
      const faceXys = !this.queryParams.faceXy ? null : [this.queryParams.faceXy];
      listProzyPost({ xyIds: faceXys, zyIds }).then(response => {
        this.prozyList = response.rows;
      });
    },
    changeSeletXs() {
      let zyIds = this.$route.query.zyIdList.split(',');
      zyIds.forEach(v => {
        v = String(v);
      });
      let bjIds = this.$route.query.bjIdList.split(',');
      bjIds.forEach(v => {
        v = String(v);
      });
      this.prozyList = [];
      const faceXys = !this.queryParams.faceXy ? null : [this.queryParams.faceXy];
      const faceZys = !this.queryParams.faceZy ? null : [this.queryParams.faceZy];
      listProzyPost({ xyIds: faceXys, zyIds }).then(response => {
        this.prozyList = response.rows;
      });
      listProbjPost({ xyIds: faceXys, zyIds: faceZys, bjIds }).then(response => {
        this.probjList = response.rows;
      });
    },
    handlelistProxy() {
      this.queryParams.faceXy = this.queryParams.faceXy == '' ? null : this.queryParams.faceXy;
      this.getInit();
      this.quizXy();
    },
    handlelistProzy(type) {
      if (type === '学院') {
        this.queryParams.faceZy = null;
      }
      this.changeSelet();
      this.quizZy();
    },
    handlelistProbj(type) {
      if (type === '学院') {
        this.queryParams.faceZy = null;
        this.queryParams.faceBj = null;
      } else if (type === '专业') {
        this.queryParams.faceBj = null;
      }
      this.queryParams.currentPage = 1;
      this.changeSeletXs();
      this.quizNj();
    },
    quizXy() {
      this.loading = true;
      this.tableList = [];
      let xyIdList = this.$route.query.xyIdList.split(',');
      xyIdList.forEach(v => {
        v = String(v);
      });
      let bjIdList = this.$route.query.bjIdList.split(',');
      bjIdList.forEach(y => {
        y = String(y);
      });
      getPerformanceXy({ id: this.$route.query.id, ...this.queryParams, xyIdList, bjIdList }).then((res) => {
        this.tableList = res.rows;
        this.loading = false;
      });
    },
    quizZy() {
      this.loading = true;
      this.tableList = [];
      let zyIdList = this.$route.query.zyIdList.split(',');
      zyIdList.forEach(v => {
        v = String(v);
      });
      let bjIdList = this.$route.query.bjIdList.split(',');
      bjIdList.forEach(y => {
        y = String(y);
      });
      !this.queryParams.faceXy ? delete this.queryParams.faceXy : this.queryParams.faceXy = this.queryParams.faceXy;
      !this.queryParams.faceZy ? delete this.queryParams.faceZy : this.queryParams.faceZy = this.queryParams.faceZy;
      getPerformanceZy({ id: this.$route.query.id, ...this.queryParams, zyIdList, bjIdList }).then((res) => {
        this.tableList = res.rows;
        this.loading = false;
      });
    },
    quizNj() {
      this.loading = true;
      let xyIdList = this.$route.query.xyIdList.split(',');
      xyIdList.forEach(v => {
        v = String(v);
      });
      let bjIdList = this.$route.query.bjIdList.split(',');
      bjIdList.forEach(y => {
        y = String(y);
      });
      !this.queryParams.faceXy ? delete this.queryParams.faceXy : this.queryParams.faceXy = this.queryParams.faceXy;
      !this.queryParams.faceZy ? delete this.queryParams.faceZy : this.queryParams.faceZy = this.queryParams.faceZy;
      !this.queryParams.faceBj ? delete this.queryParams.faceBj : this.queryParams.faceBj = this.queryParams.faceBj;
      let dataQuery = { ...this.queryParams };
      if (dataQuery.limit) {
        delete dataQuery.limit;
        delete dataQuery.page;
      }
      getPerformanceXs({ id: this.$route.query.id, ...dataQuery, xyIdList, bjIdList }).then((res) => {
        this.tableList = [];
        this.studentList = res.data.data;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    handleClick(tab, event) {
      this.queryParams = {};
      if (tab.label == '学院列表') {
        this.quizXy();
      } else if (tab.label == '专业列表') {
        this.quizZy();
      } else if (tab.label == '学生列表') {
        this.queryParams = {
          currentPage: 1,
          currentSize: 10
        };
        this.quizNj();
      }
      this.getInit();
    },
    /** 导出按钮操作 */
    handleExport() {
      let xyIdList = this.$route.query.xyIdList.split(',');
      xyIdList.forEach(v => {
        v = String(v);
      });
      let bjIdList = this.$route.query.bjIdList.split(',');
      bjIdList.forEach(y => {
        y = String(y);
      });
      this.download('practice/user/performanceExport', {
        id: this.$route.query.id,
        ...this.queryParams,
        xyIdList: xyIdList,
        bjIdList: bjIdList,
        bussType: this.activeName == 'first' ? 1 : this.activeName == 'second' ? 2 : 3
      }, `任务完成情况.xlsx`)
    },
    resetQuery() {
      this.queryParams = {
        currentPage: 1,
        currentSize: 10,
        studentName: '',
        stNumber: ''
      };
      this.resetForm("queryForm");
      this.changeSeletXs();
      this.quizNj();
    },
  }
}
</script>

<style lang="scss" scoped>
.crumbs {
  margin: 10px 0;
  display: flex;

  .fwStyle {
    margin: 0 10px;
    color: #1890ff;
    cursor: pointer;
  }
}

.inforClass {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.inforClass::before {
  content: '';
  width: 5px;
  height: 25px;
  background-color: #419eff;
  margin-right: 10px;
  display: inline-block;
}

.bankLabelStyle {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.rightNum {
  width: 100%;
  text-align: right;
  font-size: 14px;
  color: #a9a9a9;
  margin: -10px 10px 10px 0;
}

::v-deep .el-form-item {
  margin-bottom: 10px;
}

.total-colleges {
  margin-right: 20px;
}

::v-deep .pagination-container {
  margin-bottom: 18px !important;
}
</style>
